<template>
  <div
    class="dialogInner"
    style="background: #fff; padding: 25px 0; height: 100%"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmitHandle()"
      :label-width="$i18n.locale === 'en-US' ? '150px' : '150px'"
    >
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="商户名称" prop="name">
            <el-input v-model="dataForm.name"></el-input>
            <!-- <el-select v-model="dataForm.ismapId" clearable placeholder="请选择商户名称" style="width:100%">
                            <el-option v-for="item in Scenicspotdata" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商户类型" prop="merchantCategory">
            <ren-select
              v-model="dataForm.merchantCategory"
              dict-type="MerchantCategory"
              placeholder="请选择商户类型"
              :disabled="true"
              style="width: 100%"
            ></ren-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业名称" prop="companyName">
            <el-input v-model="dataForm.companyName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业类型" prop="companyType">
            <ren-select
              v-model="dataForm.companyType"
              dict-type="CompanyType"
              placeholder="请选择"
            ></ren-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业法人" prop="legalPerson">
            <el-input v-model="dataForm.legalPerson"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属区域" prop="islandId">
            <el-select
              v-model="dataForm.islandId"
              placeholder="请选择区域"
              clearable
            >
              <el-option
                v-for="item in scenicOptions"
                :key="item.id"
                :label="item.scenicName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="统一社会信用代码" prop="creditCode">
            <el-input v-model="dataForm.creditCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法人身份证号" prop="idCard">
            <el-input v-model="dataForm.idCard"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="营业时间范围" prop="openDate">
            <el-time-picker
              style="width: 48%; margin-right: 2%"
              value-format="HH:mm"
              format="HH:mm"
              v-model="startTime"
              placeholder="选择时间"
            >
            </el-time-picker>
            <el-time-picker
              style="width: 48%; margin-right: 2%"
              value-format="HH:mm"
              format="HH:mm"
              v-model="endTime"
              placeholder="选择时间"
            >
            </el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="dataForm.merchantCategory == '4'">
          <el-form-item label="餐饮类型" prop="foodType">
            <ren-select
              v-model="dataForm.foodType"
              dict-type="food_type"
              placeholder="请选择"
            ></ren-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="dataForm.merchantCategory == 10">
          <el-form-item label="船型数量" prop="personPrice">
            <el-input
              v-model="dataForm.shipNum"
              type="number"
              :placeholder="disabled ? '' : '船型数量'"
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12" v-if="dataForm.merchantCategory == '4'">
          <el-form-item label="最低价（人均）" prop="personPrice">
            <el-input
              v-model="dataForm.personPrice"
              type="number"
              :placeholder="disabled ? '' : '最低价（人均）'"
            ></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="12" v-if="dataForm.merchantCategory == '4'">
          <el-form-item label="最低价（人均）" prop="personPrice">
            <el-input
              v-model="dataForm.personPrice"
              type="number"
              :placeholder="disabled ? '' : '最低价（人均）'"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="dataForm.merchantCategory == '4'">
          <el-form-item label="地图商户" prop="isMapId">
            <el-select
              v-model="dataForm.isMapId"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in Scenicspotdata"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24" v-if="dataForm.merchantCategory=='4'">
                <el-form-item label="提供服务" prop="">
                    <el-input v-model="bigTable" :placeholder="disabled?'':'提供服务'" style="width:23%;margin-right:2%"></el-input>
                    <el-input v-model="box" :placeholder="disabled?'':'提供服务'" v-if="bigTable!=''" style="width:23%;margin-right:2%"></el-input>
                    <el-input v-model="powerBank" :placeholder="disabled?'':'提供服务'" v-if="box!=''"  style="width:23%;margin-right:2%"></el-input>
                    <el-input v-model="selfService" :placeholder="disabled?'':'提供服务'" v-if="powerBank!=''"  style="width:23%;margin-right:2%"></el-input>
                </el-form-item>
            </el-col> -->
        <el-col :span="12" v-if="dataForm.merchantCategory == '4'">
          <el-form-item label="提供服务" prop="provideService">
            <ren-select
              v-model="provideServiceList"
              dict-type="merchant_provide_service"
              placeholder="请选择"
              :limit="6"
              multiple
            ></ren-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="地址" prop="areaDetail">
            <el-select
              v-model="dataForm.province"
              placeholder="省编码"
              clearable
              style="width: 15%"
              @change="
                (val) => {
                  regionChange(val, 'province');
                }
              "
            >
              <el-option
                v-for="item in provinceOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="dataForm.city"
              placeholder="市"
              clearable
              style="width: 15%; margin: 0 1%"
              @change="
                (val) => {
                  regionChange(val, 'city');
                }
              "
            >
              <el-option
                v-for="item in cityOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="dataForm.area"
              placeholder="区"
              style="width: 15%; margin: 0 1%"
              clearable
              @change="
                (val) => {
                  regionChange(val, 'area');
                }
              "
            >
              <el-option
                v-for="item in areaOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-input
              v-model="dataForm.street"
              placeholder="街道"
              style="width: 15%; margin: 0 1%"
            >
            </el-input>
            <el-input
              v-model="dataForm.areaDetail"
              placeholder="请输入详细地址"
              style="width: 34%"
            ></el-input>
          </el-form-item>
        </el-col>
        <h3>联系人信息</h3>
        <el-col :span="12">
          <el-form-item label="联系人姓名" prop="linkName">
            <el-input v-model="dataForm.linkName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人号码" prop="phone">
            <el-input v-model="dataForm.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管理员用户名" prop="adminName">
            <el-input v-model="dataForm.adminName"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="管理员密码" prop="adminPassword">
            <el-input
              type="password"
              v-model="dataForm.adminPassword"
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-table :data="administratorInfo" border style="width: 94.5%;margin:0 1% 0 4.5%">
                <el-table-column prop="administrator" header-align="center" align="center" label="姓名" >
                </el-table-column>
                <el-table-column prop="phone" header-align="center" align="center" label="联系方式" >
                </el-table-column>
                <el-table-column prop="lastLoginTime" header-align="center" align="center" label="最后登录时间">
                </el-table-column>
                <el-table-column prop="createTime" header-align="center" align="center" label="创建时间">
                </el-table-column>
                 <el-table-column prop="role" header-align="center" align="center" label="身份角色">
                </el-table-column>
                </el-table> -->

        <h3>资料上传</h3>
        <el-col :span="8">
          <el-form-item label="相关证件照" prop="licensePic">
            <el-upload
              class="avatar-uploader"
              :action="url"
              :show-file-list="false"
              :on-success="
                (res, file) => handleAvatarSuccess(res, file, 'licensePic')
              "
              :before-upload="(file) => beforeUploadHandle(file, 'licensePic')"
            >
              <img
                v-if="dataForm.licensePic"
                :src="dataForm.licensePic"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="法人身份证(国徽面)" prop="idCardFront">
            <el-upload
              class="avatar-uploader"
              :action="url"
              :show-file-list="false"
              :on-success="
                (res, file) => handleAvatarSuccess(res, file, 'idCardFront')
              "
              :before-upload="(file) => beforeUploadHandle(file, 'idCardFront')"
            >
              <img
                v-if="dataForm.idCardFront"
                :src="dataForm.idCardFront"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人身份证(人像面)" prop="idCardReverse">
            <el-upload
              class="avatar-uploader"
              :action="url"
              :show-file-list="false"
              :on-success="
                (res, file) => handleAvatarSuccess(res, file, 'idCardReverse')
              "
              :before-upload="
                (file) => beforeUploadHandle(file, 'idCardReverse')
              "
            >
              <img
                v-if="dataForm.idCardReverse"
                :src="dataForm.idCardReverse"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <p class="pdl60">
            <span style="color: #f56c6c; margin-right: 4px">*</span>
            店铺门头/公司照片<span
              >(支持png、jpg，建议尺寸750*980px，最多6张)</span
            >
          </p>
        </el-col>
        <el-col :span="24">
          <el-form-item label="" prop="storeFrontPic">
            <el-upload
              :action="url"
              :file-list="fileList"
              :limit="6"
              :before-upload="
                (file) => beforeUploadHandle(file, 'storeFrontPic')
              "
              list-type="picture-card"
              :on-success="successHandle"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <p class="pdl60">其他可以证明企业实力的证书或奖励</p>
        </el-col>
        <el-col :span="24">
          <el-form-item label="" prop="otherCertificatePic">
            <el-upload
              class="avatar-uploader"
              :action="url"
              :show-file-list="false"
              :on-success="
                (res, file) =>
                  handleAvatarSuccess(res, file, 'otherCertificatePic')
              "
              :before-upload="
                (file) => beforeUploadHandle(file, 'otherCertificatePic')
              "
            >
              <img
                v-if="dataForm.otherCertificatePic"
                :src="dataForm.otherCertificatePic"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <h3>商家介绍</h3>
        <el-col :span="24">
          <el-form-item label="内容" prop="introduce">
            <editor-vue
              style="margin-top: -30px"
              :content="dataForm.introduce"
              @EditorChange="getEditor"
              ref="infoIntroduceRef"
            ></editor-vue>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: center">
      <el-button
        type="primary"
        @click="dataFormSubmitHandle()"
        style="width: 120px"
        >{{ $t("confirm") }}</el-button
      >
    </div>
    <!-- 裁剪框 -->
    <cropper-dlg
      v-if="showCropper"
      :dialogVisible.sync="showCropper"
      :img-file="currentFile"
      ref="vueCropper"
      @upload="cropperUpload"
    ></cropper-dlg>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import mixinRegionModule from "@/mixins/region-module";
import debounce from "lodash/debounce";
import editorVue from "@/components/editor";
export default {
  components: {
    editorVue,
  },
  mixins: [mixinRegionModule],
  data() {
    return {
      currentFile: "",
      cropperIndex: null,
      showCropper: false, //裁剪弹框
      isCropper: true, //上传之前是否显示裁剪
      visible: false,
      fileList: [],
      startTime: "",
      endTime: "",
      disabled: false,
      url: `${
        window.SITE_CONFIG["apiURL"]
      }/oss/file/aliyunUpload?access_token=${Cookies.get("access_token")}`,
      provideServiceList: [],
      Scenicspotdata: [],
      dataForm: {
        address: "",
        adminName: "",
        adminPassword: "",
        licensePic: "",
        area: "",
        areaDetail: "",
        city: "",
        id: "",
        idCard: "",
        idCardFront: "",
        idCardReverse: "",
        openDate: "",
        provideService: "",
        personPrice: "",
        storeFrontPic: [],
        latitude: 0,
        legalPerson: "",
        islandId: "",
        isMapId: "",
        merchantCategory: "",
        companyName: "",
        foodType: "",
        companyType: "",
        creditCode: "",
        linkName: "",
        phone: "",
        longitude: 0,
        name: "",
        province: "",
        street: "",
        useTime: "",
        introduce: "",
        otherCertificatePic: "",
      },
      administratorInfo: [],
      scenicOptions: [], //岛屿
      cardType: ["身份证", "护照"],
      hotelType: [
        {
          val: 1,
          name: "酒店",
        },
        {
          val: 2,
          name: "高端民宿",
        },
        {
          val: 3,
          name: "中端民宿",
        },
        {
          val: 4,
          name: "其他民宿",
        },
      ],
      bsType: [
        {
          label: "渔家乐",
          value: 11,
        },
      ],
      tempLegalPerson: "",
      temIdCard: "",
      tempLinkName: "",
      tempPhone: "",
    };
  },
  watch: {
    startTime(newval, oldval) {
      if (newval != oldval && this.endTime && newval) {
        this.dataForm.openDate = newval + " " + this.endTime;
      } else {
        this.dataForm.openDate = "";
      }
    },
    endTime(newval, oldval) {
      if (newval != oldval && this.startTime && newval) {
        this.dataForm.openDate = this.startTime + " " + newval;
      } else {
        this.dataForm.openDate = "";
      }
    },
  },
  computed: {
    dataRule() {
      return {
        areaDetail: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        storeFrontPic: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "change",
          },
        ],
        idCardFront: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        companyType: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        legalPerson: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        islandId: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "change",
          },
        ],
        foodType: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "change",
          },
        ],
        personPrice: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        isMapId: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "change",
          },
        ],
        openDate: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "change",
          },
        ],
        idCardReverse: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        creditCode: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        adminPassword: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        adminName: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        merchantType: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  created() {
    this.init();
    this.getjqdata();
  },
  methods: {
    getEditor(val) {
      this.dataForm.introduce = val;
    },

    handleAvatarSuccess(res, file, key) {
      this.dataForm[key] = res.data.url;
    },
    handleRemove(file, fileList) {
      this.fileList = fileList.map((item) => {
        return item;
      });
    },
    // 上传之前
    beforeUploadHandle(file, name) {
      if (
        file.type !== "image/jpg" &&
        file.type !== "image/jpeg" &&
        file.type !== "image/png" &&
        file.type !== "image/gif"
      ) {
        this.$message.error(
          this.$t("upload.tip", {
            format: "jpg、png、gif",
          })
        );
        return false;
      }
      if (this.isCropper) {
        //显示裁剪
        this.currentFile = file;
        this.cropperIndex = name;
        this.showCropper = true;
        this.$nextTick(() => {
          this.$refs.vueCropper.init();
        });
        return false;
      }
    },
    cropperUpload(data) {
      this.showCropper = false;
      if (data != "close") {
        //裁剪成功后获取的图片
        this.$http.post("/oss/file/aliyunUpload", data).then((res) => {
          if (res.data.code == 0) {
            if (this.cropperIndex == "storeFrontPic") {
              //门头照
              this.successHandle(res.data);
            } else {
              //其他照片
              this.handleAvatarSuccess(res.data, "", this.cropperIndex);
            }
          }
        });
      }
    },
    // 上传成功
    successHandle(res, file, fileList) {
      if (res.code !== 0) {
        return this.$message.error(res.msg);
      }
      this.fileList.push({
        name: res.data.url,
        url: res.data.url,
      });
    },
    init() {
      this.visible = true;
      this.startTime = "";
      this.endTime = "";
      this.getScenicOptions();
      this.provincAreaDetailInfoList();
      (this.fileList = []),
        (this.provideServiceList = []),
        this.$nextTick(() => {
          this.dataForm.province = "";
          this.dataForm.city = "";
          this.dataForm.area = "";
          this.dataForm.street = "";
          this.dataForm.areaDetail = "";
          this.$refs["dataForm"].resetFields();
          this.dataForm.id = this.$store.state.user.MerchantId;
          this.getInfo();
        });
    },
    getScenicOptions() {
      this.$http
        .get("scenic/isscenic/selectScenicList", {})
        .then(({ data: res }) => {
          if (res.msg == "success") {
            this.scenicOptions = res.data;
          }
        });
    },
    // 获取地图数据
    getjqdata() {
      this.$http
        .get("/sys/ismap/pageNoPro", {
          params: {
            type: 3,
            page: 1,
            limit: -1,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.Scenicspotdata = res.data.data.list;
            // let itemVal = this.Scenicspotdata.filter(
            //   (item) => item.id == this.dataForm.isMapId
            // );
            // if (itemVal[0]) {
            //   this.dataForm.name = itemVal[0].name;
            //   if (this.dataForm.areaDetail == "") {
            //     this.dataForm.areaDetail = itemVal[0].address;
            //   }
            // }
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    // 获取信息
    getInfo() {
      this.$http
        .get("/scenic/merchant/info/" + this.dataForm.id)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }

          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
          this.dataForm.foodType = !this.dataForm.foodType
            ? ""
            : this.dataForm.foodType;
          this.tempLegalPerson = this.dataForm.legalPerson;
          this.temIdCard = this.dataForm.idCard;
          this.tempLinkName = this.dataForm.linkName;
          this.tempPhone = this.dataForm.phone;
          this.$nextTick(() => {
            this.$refs.infoIntroduceRef.init();
          });
          if (this.dataForm.provideService) {
            this.provideServiceList = this.dataForm.provideService.split(",");
          }else {
            this.provideServiceList = [];
          }
          if (this.dataForm.openDate) {
            let openDate = this.dataForm.openDate.split("-");
            this.startTime = openDate[0];
            this.endTime = openDate[1];
          }
          if (this.dataForm.storeFrontPic != "") {
            let picArr = this.dataForm.storeFrontPic.split(",");
            for (let i = 0; i < picArr.length; i++) {
              this.fileList.push({
                url: picArr[i],
              });
            }
          }
          //null 值转空
          for (let k in this.dataForm) {
            if (this.dataForm[k] == null) {
              this.dataForm[k] = "";
            }
          }
          // 省市区数据
          if (this.dataForm.city) {
            this.cityAreaDetailInfoList(this.dataForm.province);
          }
          if (this.dataForm.area) {
            this.countyAreaDetailInfoList(this.dataForm.city);
          }
        })
        .catch(() => {});
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs["dataForm"].validate((valid) => {
          if (!valid) {
            return false;
          }
          //加密
          let newDataForm = Object.assign({}, this.dataForm);
          if (
            newDataForm.legalPerson &&
            this.tempLegalPerson != newDataForm.legalPerson
          ) {
            //编辑了
            newDataForm.legalPerson = this.$CryptoJS.encrypt(
              newDataForm.legalPerson
            );
          } else {
            newDataForm.legalPerson = null;
          }
          if (newDataForm.idCard && this.temIdCard != newDataForm.idCard) {
            newDataForm.idCard = this.$CryptoJS.encrypt(newDataForm.idCard);
          } else {
            newDataForm.idCard = null;
          }
          if (
            newDataForm.linkName &&
            this.tempLinkName != newDataForm.linkName
          ) {
            newDataForm.linkName = this.$CryptoJS.encrypt(newDataForm.linkName);
          } else {
            newDataForm.linkName = null;
          }
          if (newDataForm.phone && this.tempPhone != newDataForm.phone) {
            newDataForm.phone = this.$CryptoJS.encrypt(newDataForm.phone);
          } else {
            newDataForm.phone = null;
          }
          newDataForm.storeFrontPic = this.fileList
            .map((item) => {
              return item.url;
            })
            .toString();
          newDataForm.products = null;
          newDataForm.openDate = this.startTime + "-" + this.endTime;
          newDataForm.provideService = this.provideServiceList.join(",");
          this.$http[!newDataForm.id ? "post" : "put"](
            "/scenic/merchant/info",
            newDataForm
          )
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                // onClose: () => {
                //     this.visible = false;
                //     this.$emit("refreshDataList");
                // },
              });
            })
            .catch(() => {});
        });
      },
      1000,
      {
        leading: true,
        trailing: false,
      }
    ),
  },
};
</script>

<style lang="scss" scoped>
.avatar-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    .el-upload:hover {
      border-color: #409eff;
    }
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 158px;
    height: 158px;
    line-height: 158px;
    text-align: center;
  }

  .avatar {
    width: 158px;
    height: 158px;
    display: block;
  }
}

h3 {
  padding: 30px 0 15px;
  width: 94%;
  margin: 0 auto 30px;
  border-bottom: 1px solid #ddd;
  color: #303133;
  font-size: 22px;
  overflow: hidden;
}

.el-select {
  width: 100%;
}
</style>
